<template>
  <div class="main">
    <h3>分类</h3>
    
    <div class="category">
      <div class="left">
        <div class="cg" :class="{on:0===currentIndex}" @click="changeCategory('玄幻小说')">玄幻</div>
        <div class="cg" :class="{on:1===currentIndex}" @click="changeCategory('修真小说')">修真</div>
        <div class="cg" :class="{on:2===currentIndex}" @click="changeCategory('都市小说')">都市</div>
        <div class="cg" :class="{on:3===currentIndex}" @click="changeCategory('科幻小说')">科幻</div>
        <div class="cg" :class="{on:4===currentIndex}" @click="changeCategory('历史小说')">历史</div>
        <div class="cg" :class="{on:5===currentIndex}" @click="changeCategory('网游小说')">网游</div>
        <div class="cg" :class="{on:6===currentIndex}" @click="changeCategory('言情小说')">言情</div>
        <div class="cg" :class="{on:7===currentIndex}" @click="changeCategory('其他小说')">其他</div>
      </div>
      <div class="right">
        
        <a-list :data-source="books" :grid="{xs:1,md:2}">
          <a-list-item slot="renderItem" slot-scope="item">
            <div class="book" @click="goBookInfo(item)">
              <div class="img">
                <img :src="item.picUrl" alt />
              </div>
              <div class="txt">
                <div class="bookName">{{item.bookName}}</div>
                <div class="author">{{item.author}}</div>
                <div class="status">{{item.status}}</div>
                <div class="lastChapter">{{item.lastChapterName}}</div>
                <div class="intro">{{item.intro}}</div>
              </div>
            </div>
          </a-list-item>
        </a-list>
        
        <!-- <div class="book" v-for="item in books" :key="item.url" @click="goBookInfo(item)">
          <div class="img">
            <img :src="item.picUrl" alt />
          </div>
          <div class="txt">
            <div class="bookName">{{item.bookName}}</div>
            <div class="author">{{item.author}}</div>
            <div class="status">{{item.status}}</div>
            <div class="lastChapter">{{item.lastChapterName}}</div>
            <div class="intro">{{item.intro}}</div>
          </div>
        </div>-->
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../components/Footer.vue";
import {List} from 'ant-design-vue'
import {getCategory} from '@/api/index.js'


export default {
  data: () => {
    return {
      currentIndex: 0,
      books: [],
      cateArray: [
        "玄幻小说",
        "修真小说",
        "都市小说",
        "科幻小说",
        "历史小说",
        "网游小说",
        "言情小说",
        "其他小说",
      ],
    };
  },
  components: {
    Footer,
    'a-list':List,
    'a-list-item':List.Item
  },
  created() {
    this.fetchCategory(this.$store.state.currentCategory);
  },
  computed: {
    cate() {
      return this.$store.state.currentCategory;
    },
  },
  watch: {
    cate: function (cg) {
      this.fetchCategory(cg);
    },
  },
  methods: {
    fetchCategory: async function (cg) {
      var index = this.cateArray.indexOf(cg);
      this.currentIndex = index;
      const res = await getCategory({
        category:cg
      })
      this.books = res.data;
    },
    changeCategory(cg) {
      this.$store.commit("updateCategory", cg);
    },

    goBookInfo(book) {
      /*
        这里的参数是个url,里面有斜杠，所以要先用encodeURIComponent（）编码一下
      */
      var bookUrl = encodeURIComponent(book.url);
      this.$router.push({ path: "/bookinfo/" + bookUrl });
    },
  },
};
</script>

<style lang='less' scoped>
@media screen and (max-width: 420px) {
  .main {
    height: 80%;
  }
  .category {
    height: 100%;
    display: flex;
  }
  h3 {
    font-weight: 500;
    text-align: center;
    margin: 0;
    padding: 15px;
  }
  .left {
    width: 22%;
    height: 100%;
    border-right: 1px solid rgb(236, 230, 230);
    .cg {
      text-align: center;
      margin: 25px auto;
      font-weight: 400;
    }
  }
  .right {
    width: 80%;
    overflow-x: hidden;
    .book {
      width: 100%;
      height: 75px;
      margin: 10px;
      position: relative;
      .img {
        width: 50px;
        height: 75px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .txt {
        position: absolute;
        width: 200px;
        top: 0;
        left: 55px;
        height: 78px;
        // border-bottom: 1px solid lightgrey;
        .bookName {
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 5px;
        }
        .author:before {
          content: "作者：";
        }
        .status:before {
          content: "状态：";
        }
        .author,
        .status,
        .lastChapter {
          top: 40px;
          left: 52px;
          font-size: 12px;
          color: gray;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          // margin: 2px;
          // margin-left: 5px;
        }
        .intro {
          display: none;
        }
      }
    }
  }
  .on {
    color: red;
    border-left: 2px solid red;
  }
}
@media screen and (min-width: 420px) {
  h3 {
    display: none;
  }
  .category .left {
    display: none;
  }
  .right {
    display: flex;
    flex-wrap: wrap;
    padding-top: 35px;
    .book {
      width: 500px;
      height: 104px;
      margin-right: 33px;
      margin-top: 15px;
      overflow: hidden;
      display: flex;
      .img {
        width: 72px;
        height: 102px;
        border: 1px solid gray;
        img {
          width: 70px;
          height: 100px;
          border: 1px solid white;
          cursor: pointer;
        }
      }
      .txt {
        width: 400px;
        margin-left: 10px;
        .bookName {
          margin-top: 10px;
          font-weight: 700;
          cursor: pointer;
        }
        .author {
          font-size: 12px;
          margin-top: 3px;
        }
        .status,
        .lastChapter {
          display: none;
        }
        .intro {
          font-size: 12px;
          width: 400px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>